{extend name="public/base" /}

{block name="title"}控制台{/block}

{block name="css"}
<style>
    .layui-table-cell {
        height:auto;
    }
</style>
{/block}

{block name="main"}
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <fieldset class="layui-elem-field site-demo-button" style="margin-top: 30px;border:0">
                <div class="layui-btn-group demoTable">
                    <a href="javascript:;" class="layui-btn layui-btn-sm save-banner" data-id="0">新增banner</a>
                </div>
            </fieldset>
            <div class="layui-card">
                <div class="layui-card-header">banner列表</div>
                <div class="layui-card-body">
                    <table class="layui-hide" id="banner-list" lay-filter="banner-list"></table>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/html" id="image">
    <img class="layui-upload-img logo" src="{{d.image}}" />
</script>


<script type="text/html" id="btn_group">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

{/block}

{block name="js"}
<script>
    layui.use(['index', 'table'], function(){
        var table = layui.table, $ = layui.jquery;

        table.render({
            elem: '#banner-list'
            ,url: '{:url("index")}'
            ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            ,cols: [[
                {field:'id', title: 'ID'}
                ,{field:'name', title: '用户名'} //width 支持：数字、百分比和不填写。你还可以通过 minWidth 参数局部定义当前单元格的最小宽度，layui 2.2.1 新增
                ,{field:'', width: 200, title: '图片', templet: '#image'}
                ,{field:'link', title: '链接'}
                ,{field:'', title: '操作', toolbar: '#btn_group'}
            ]]
        });

        //监听工具条
        table.on('tool(banner-list)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的DOM对象

            if(layEvent === 'del'){ //删除
                layer.confirm('真的删除行么', function(index){
                    obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                    layer.close(index);
                    //向服务端发送删除指令
                });
            } else if(layEvent === 'edit'){ //编辑
                //do something
                open_save_banner(obj.data.id);
            }
        });

        $(".save-banner").click(function () {
            var _this = $(this);
            var _id = _this.data('id');
            open_save_banner(_id);
        });

        /**
         * 打开添加、编辑页面
         * @param _id
         */
        function open_save_banner(_id) {
            layer.open({
                type: 2,
                title: (_id == 0 ? '新增' : '编辑') + '产品',
                shadeClose: true,
                shade: 0.8,
                area: ['100%', '100%'],
                content: '/admin/banner/save_banner/id/' +  _id//iframe的url
            });
        }

    });
</script>
{/block}